The Actions columns in both report-table components used inline button definitions while property-worker-table uses a Material menu dropdown pattern. This inconsistency created a disjointed UX across tables.

Changes

Refactored two report-table components:

1. modules/reports/components/report-table
2. components/reports/report-table

TypeScript (report-table.component.ts)

• Removed inline type: 'button' and buttons array from tableHeaders and adminTableHeaders
• Added width: '160px' and pinned: 'right' to Actions column definition
• Removed dynamic width calculation logic and dynamic class assignment logic

HTML (report-table.component.html)

• Added cellTemplate binding for Actions column
• Implemented actionsTpl with Material menu dropdown containing View images (conditional), Edit, and Delete actions
• Used button IDs matching existing test patterns (actionMenu, viewImagesBtn-{{i}}, etc.)

Before:

{
  header: this.translateService.stream('Actions'),
  field: 'actions',
  type: 'button',
  buttons: [
    {
      tooltip: this.translateService.stream('View images'),
      type: 'icon',
      click: (record) => this.onClickViewPicture(record.microtingSdkCaseId),
      icon: 'image',
      iif: (record) => record.imagesCount !== 0,
    },
    // ... more buttons
  ]
}

After:

<ng-template #actionsTpl let-row let-i="index">
  <div class="report-actions" id="action-items-{{i}}">
    <button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item *ngIf="row.imagesCount !== 0" (click)="onClickViewPicture(row.microtingSdkCaseId)">
        <mat-icon>image</mat-icon>
        <span>{{ 'View images' | translate }}</span>
      </button>
      <!-- ... more menu items -->
    </mat-menu>
  </div>
</ng-template>

All functionality preserved, UI now consistent with other tables.

Files Modified

• eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts

• eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html

• eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts

• eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html

• Fixes Change "Actions" to follow same style as all other tables #569

• Fixes Change "Actions" to follow same style as all other tables #569

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.